<template>
  <view class="box">
    <view v-for="(item, index) in listData" :key="index" class="grid-body content-box" @click="link(item)">
      <view class="info flex">
        <image class="icon" src="/static/images/online-examination/icon-examination.png" />
        <view class="ml-20 info-right">
          <view class="title mt-10">{{ item.examName }}</view>
         <view class="time">{{ time(item) }}</view> 
          <view class="button">
            <view class="img-view">
              <image
                class="icon-m"
                :src="`/static/images/online-examination/icon-xing-${item.examResult === '1' ? 'p' :'l'}.png`"
              />
              <view class="fenshu">{{ item.finalScore || 0 }} <text>分</text></view>
            </view>
            <view class="zf">总分 {{ item.fullmark || 0}}</view>
          </view>
        </view>
      </view>
      <image
        class="icon-right1"
        :src="`/static/images/online-examination/icon-${getIconSubffix(item.examResult)}.png`"
      />
    </view>
  </view>
</template>

<script>
import { recordList } from '@/api/educational-training/online-examination'
import dayjs from 'dayjs'
export default {
  name: 'online-record',
  components: {},
  props: {},
  data() {
    return {
      listData: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(isRefresh = true) {
      const { total, rows } = await recordList(this.queryParams).finally(() => uni.stopPullDownRefresh())
      if (isRefresh) {
        this.listData = rows || []
      } else {
        this.listData = [...this.listData, ...rows]
      }
      this.total = total
    },
    link(item) {
			const nowTime = new Date().getTime()
			// 缺考并且不在考试时间内
			if (item.examResult == 3 && nowTime > new Date(item.startTime).getTime() && nowTime < new Date(item.endTime).getTime()) {
				return
			}
      uni.navigateTo({ url: `/pages/work/online-examination/examination-detail?examPlanId=${item.examPlanId}` })
    },
    
  },
  computed:{
    getIconSubffix(){
      return (data)=>{
        const map = { 1: 'p', 2: 'l', 3: 'defect'}
        return map[data]
      }
    },
    time(){
      return (data)=>{
        if(!data.actualStartTime || !data.actualEndTime) return '--'
        return `${dayjs(data.actualStartTime).format('YYYY/MM/DD')} ${dayjs(data.actualStartTime).format('HH:mm')}~${dayjs(data.actualEndTime).format('HH:mm')}`
      }
    }
  },
  onPullDownRefresh() {
    this.queryParams.pageNum = 1
    this.getList()
  },
  onReachBottom() {
    const { pageNum, pageSize } = this.queryParams
    if (pageNum * pageSize < this.total) {
      this.queryParams.pageNum += 1
      this.getList(false)
    }
  }
}
</script>

<style scoped lang="scss">
.box
{
  padding: 40rpx 0;
}
.content-box {
  font-family: PingFang SC-Regular, PingFang SC;
  background: #fff;
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx 20rpx 30rpx;
  box-sizing: border-box;
  width: 690rpx;
  height: 210rpx;
  position: relative;
  .info {
    justify-content: space-between;
    align-items: center;
  }
  .info-right {
    flex: 1;
    height: 150rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .icon {
    width: 150rpx;
    height: 150rpx;
  }
  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    @include text-overflow-ellipsis(1)
  }
  .time {
    font-size: 26rpx;
    color: #999999;
    font-weight: 400;
  }

  .icon-right1 {
    width: 105rpx;
    height: 92rpx;
    position: absolute;
    right: 25rpx;
    bottom: 17rpx;
    display: block;
  }
  .icon-m {
    width: 27rpx;
    height: 27rpx;
  }
  .img-view {
    display: flex;
    align-items: center;
  }
  .button {
    display: flex;
    align-items: baseline;
  }
  .fenshu {
    font-size: 40rpx;
    font-weight: bold;
    color: #454a5e;
    margin: 0 30rpx 0 12rpx;
    line-height: 40rpx;
    display: flex;
    align-items: baseline;
    text {
      font-size: 24rpx;
      font-weight: 400;
      padding-left: 4rpx;
    }
  }
  .zf {
    color: #999999;
    font-size: 24rpx;
  }
}
</style>
